<template>
  <div ref="fullRef" style="position: relative;width:100%;height:80vh;">
    <div class="play-header" v-if="url">
      <Refresh style="width: 1em; height: 1em; margin-right: 8px;cursor: pointer;" @click="refreshVideo(item)"></Refresh>
      <svg-icon style="cursor:pointer;" @click="toggle" :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"/>
    </div>
<!--    <LivePlayer v-if="url" aspect='fullscreen' :stretch="true" :controls="false"  :videoUrl="url" live></LivePlayer>-->
    <VideoPlayer ref="VideoPlayerRef"  aspect='fullscreen' :stretch="true" :controls="false"  :videoUrl="url" live></VideoPlayer>
  </div>
</template>

<script setup>
import {useRoute} from "vue-router"
import {ref} from "vue"
// import LivePlayer from '@liveqing/liveplayer-v3'
import VideoPlayer from '@/components/VideoPlayer/flv.vue'
import { getLiveInfo} from "@/api/wvp/surveillance";
import {Delete, Refresh} from "@element-plus/icons-vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import {useFullscreen} from "@vueuse/core";
const fullRef =ref()
const {isFullscreen, enter, exit, toggle} = useFullscreen(fullRef);
const route = useRoute();
// defineComponent(LivePlayer)
defineComponent(VideoPlayer)
const url = ref()
onMounted(() => {
  refreshVideo();
})
const VideoPlayerRef =ref();
function refreshVideo(){
  getLiveInfo(route.query.id).then(res => {
    if (res.data) {
      url.value = res.data.hdAddress;
      console.log(VideoPlayerRef.value);
      // debugger
      // VideoPlayerRef.value.play(res.data.hdAddress)
    }
  })
}
</script>

<style scoped>
.play-header{
  position: absolute;
  top: 0;
  height: 20px;
  width: 100%;
  z-index: 9999999;
  display: flex;
  background: #f2f2f2;
  opacity: 0.6;
  justify-content: right;
  align-items: center;
}
</style>
